<template>
  <view class="settlementDetails">
    <mineNavbar :styleData="styleData" />

    <view class="topContent">
      <view class="l-title ellipsis">
        {{ (positionName && positionName) || "-" }}
      </view>
      <view class="r-title">
        {{ (positionType && getStatusText(positionType)) || "-" }}
      </view>
    </view>

    <view class="uni-container">
      <scroll-view   class="scroll" @scrolltolower="scrollBottom" scroll-x='true' scroll-left="120">
        <zb-table class="table" :show-header="true" :columns="column" :stripe="true" :fit="false" :border="true"
          show-summary :summary-method="sumMetnud" :data="dataList"></zb-table>

        <view class="placeholder" />
      </scroll-view>

      <view class="operation" v-if="settlementStatus === '0'">
        <view class="refuse" @click="refuseAffirm"> 拒绝结算</view>
        <view class="Confirm" @click="affirm"> 确认结算</view>
      </view>
    </view>
  </view>
</template>

<script>
import zbTable from "./components/zb-table/zb-table.vue";
import { getSettlementDetails, getTalentsListAPI, postAffirm, postRefuseAffirm } from "@/api/subPage/mine";

export default {
  components: { zbTable },
  data() {
    return {
      column: [
        {
          name: "name",
          label: "姓名",
          fixed: false,
          width: 80,
          emptyString: "--",
          align: "center",
        },
        {
          name: "startTime",
          label: "薪酬起始时间",
          width: 180,
          sorter: true,
          align: "center",
          emptyString: "--",
        },
        {
          name: "endTime",
          label: "薪酬结束时间",
          width: 180,
          sorter: true,
          align: "center",
          emptyString: "--",
        },

        {
          name: "quantity",
          label: "薪酬天数",
          align: "center",
          emptyString: "--",
        },

        {
          name: "unitPrice",
          label: "薪酬单价",
          align: "center",
          emptyString: "--",
        },
        {
          name: "totalSalary",
          label: "员工薪酬",
          sorter: false,
          // align: "right",
          align: "center",
          emptyString: "--",
        },
        // {
        //   name: "totalCost",
        //   label: "员工总费用",
        //   sorter: false,
        //   // align: "right",
        //   align: "center",
        //   emptyString: "--",
        // },
      ],
      dataList: [],
      styleData: {
        show: true,
        tabbarText: "结算详情",
      },

      // 请求参数
      params: {
        pageSize: 5,
        pageNum: 1,
      },
      positionName: "",
      positionType: "",
      settlementStatus: "",
      totalSum: '',
      settlementDetailArr: []
    };
  },
  computed: {
    statusText() {
      return {
        1: "零工",
        2: "兼职",
        3: "全职",
      };
    },
  },

  watch: {},
  onLoad(options) {
    if (options.row) {
      const decodedObject = decodeURIComponent(options.row);
      const row = JSON.parse(decodedObject);
      console.log(row);
      this.params.settlementId = row.settlementId;
      this.params.positionId = row.positionId;
      this.params.enterpriseId = row.enterpriseId;
      this.positionName = row.positionName;
      this.positionType = row.positionType;
      this.settlementStatus = row.settlementStatus;
      getSettlementDetails(this.params).then((res) => {
        if (res.code === 200) {
          this.settlementDetailArr = res.rows
          console.log(this.settlementDetailArr);
        }
        this.dataList = res.rows.map((item) => ({
          ...item,
          startTime: row.startTime,
          endTime: row.endTime,
        }));
      })

      console.log(this.dataList, 'list');
    }
  },
  onShow() {
  },
  onReady() {
  },
  methods: {
    postRefuseAffirm,
    postAffirm,
    async scrollBottom() {
      if (this.list.length >= this.total) return;
      if (this.loading) return;
      this.form.pageNum++;
      this.status = "loading";
      this.loading = true;
      const { rows } = await getTalentsListAPI(this.form);
      this.status = "more";
      this.loading = false;
      this.list = [...this.list, ...rows];
    },

    sumMetnud(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总计';
          return;
        }
        if (column.name === 'totalSalary' || column.name === 'totalCost') {
          const values = data.map(item => Number(item[column.name]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return (prev * 100000 + curr * 100000) / 100000;
              } else {
                return prev;
              }
            }, 0);
            sums[index] += ' 元';
          }
        } else {
          sums[index] = '--';
        }
      });
      this.totalSum = sums
      console.log(this.totalSum)
      return sums;
    },

    getStatusText(status) {
      return this.statusText[status] || "-";
    },
    async affirm() {
      let that = this
      uni.showModal({
        title: "提示",
        content: "是否确认结算？",
        cancelText: "取消",
        confirmText: "确定",
        success: async function (res) {
          if (res.confirm) {
            let param = {
              positionId: that.params.positionId,
              userId: that.dataList.map(item => {
                return item.userId || ''
              }),
              totalAmount: +that.settlementDetailArr[0].totalSalary,
              totalCost: +that.settlementDetailArr[0].totalCost,
              serviceMoney: that.settlementDetailArr[0].totalSalary * 0.15,
              enterpriseId: that.params.enterpriseId,
              settlementId: that.params.settlementId
            }
            let res = await postAffirm(param)
            if (res.code === 200) {
              uni.showToast({ title: '结算成功', icon: 'none', duration: 2000 })
              setTimeout(() => {
                uni.navigateBack({})
              }, 1000)
            }
          }
        },
      });

    },
    refuseAffirm() {
      let that = this
      uni.showModal({
        title: "提示",
        content: "是否拒绝结算？",
        cancelText: "取消",
        confirmText: "确定",
        success: function (res) {
          if (res.confirm) {
            postRefuseAffirm(that.params.settlementId).then((res) => {
              if (res.code === 200) {
                uni.showToast({ title: '已拒绝结算', icon: 'none', duration: 2000 })
                setTimeout(() => {
                  uni.navigateBack({})
                }, 1000)
              }
            })
          }
        },
      });
    }
  },
};
</script>
<style lang="scss" scoped>
.settlementDetails {
  height: 100vh;
  width: 100%;
  padding: 0 24rpx;
  width: 705rpx;

  .topContent {
    margin: 32rpx 0;
    display: flex;
    justify-content: space-between;

    .l-title {
      height: 45rpx;
      width: 300rpx;

      font-weight: 500;
      font-size: 32rpx;
      color: #000000e0;
    }

    .r-title {
      height: 33rpx;

      font-weight: 500;
      font-size: 24rpx;
      color: #00000073;
      letter-spacing: 0;
    }
  }

  .uni-container {
    width: 100% !important;
    .scroll {
      white-space: nowrap !important;
      width: 100% !important;

      .table {
        position: fixed;
        width: 705rpx;
        height: 900rpx;
      }

      .placeholder {
        height: 900rpx;
      }

      ::v-deep .zb-table-applet .zb-table-header .item-th {
        background-color: #f5f5f5;
      }
    }

    .operation {
      display: flex;
      justify-content: center;
      text-align: center;
      margin-top: 60rpx;

      .refuse {
        width: 230rpx;
        height: 64rpx;
        line-height: 64rpx;
        background: #d8d8d83d;
        border-radius: 44rpx;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        font-size: 24rpx;
        color: #000000e0;
        letter-spacing: 0;
        margin-right: 24rpx;
      }

      .Confirm {
        width: 230rpx;
        height: 64rpx;
        line-height: 64rpx;
        background: #ff9e24;
        border-radius: 44rpx;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        font-size: 24rpx;
        color: #ffffff;
        letter-spacing: 0;
      }
    }
  }
}
</style>
